0
204
VistasCómo actualizar un índice dentro de una matriz con ganchos sin presionar "Error: demasiados renderizados".
Tengo una matriz de celdas que necesito actualizar en función de la entrada de un usuario de un servidor de socket. Pero cada vez que trato de actualizar un índice usando useState(), reaccionar se queja de "Error: demasiados renderizados". Intenté agregar un estado para indicar que la cuadrícula ha cambiado, pero aún produce el mismo error. Por favor ayúdame :<
const GameUI = ({ height, width }) => { const [grid, setGrid] = React.useState([]); const [didUpdate, setDidUpdate] = React.useState(0); React.useEffect(() => { for (let index = 0; index < 64; index++) { const gridItem = <GridSquare key={`${index}`} color="" />; setGrid((oldArray) => [...oldArray, gridItem]); } }, []); //not re-rendering the modified component const handleChange = () => { let board = [...grid] board[1] = <GridSquare key={`${0}${1}`} color="1" />; setGrid(board) // let count = didUpdate; // count += 1 // setDidUpdate(count) }; // handleChange(); return ( <div className="App"> <GridBoard grid={grid} /> <ScoreBoard /> <Players /> {handleChange()} {/* <MessagePopup /> */} </div> ); }; 
1 Respuestas
Responde la pregunta0
Cada vez que cambia un estado provisto desde el useState , vuelve a representar su componente. Está llamando a handleChange en cada representación, que está llamando a su enlace de estado setGrid . Por lo tanto, está renderizando su componente infinitamente.
¿Cuándo realmente necesita llamar a handleChange ? ¿Cada cuadro de animación? ¿Cada evento de acción de algún tipo? Cree un enlace useEffect o useCallback apropiado (que incluya dependencias usadas [array] como segundo parámetro), aplique el evento apropiado a su método y actívelo en consecuencia. Si elige un useEffect, no olvide devolver una función que deshabilite el manejo de eventos cuando el componente finalmente se desmonte o, de lo contrario, tendrá eventos duplicados que se activarán cada vez que se vuelva a montar en la misma aplicación.